<template>
	<view class="page bg-white">
		<SimpleTabs :list="tabList" :current="current" @change="handleChange" />
		<view class="main">
			<view v-for="(item, index) in gradeList" :key="item.value">
				<u-text :text="item.name" size="32rpx" color="#333333" bold>
				</u-text>
				<view class="form-item" @click="handleBookVersionClick(index)">
					<u-text :text="item.bookVersion || '请选择教材版本'" size="32rpx" color="#333333">
					</u-text>
					<u-icon name="arrow-down" size="32rpx" color="#999"></u-icon>
				</view>
			</view>

			<u-picker :closeOnClickOverlay="true" :show="showBookVersionPopup" :columns="bookVersionList"
				@confirm="handleBookVersionConfirm" @close="showBookVersionPopup = false"
				@cancel="showBookVersionPopup = false"></u-picker>
		</view>
		<view class="footer" :style="{ boxShadow: '0rpx -4rpx 36rpx 0rpx ' + themeTertiary }">
			<u-button text="保存" shape="circle" size="large" :color="themePrimary" @click="handleSave"></u-button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import SimpleTabs from '@/components/SimpleTabs/index.vue'
import { useTheme } from '@/composables/useTheme';
const { themePrimary, themeTertiary } = useTheme();
const current = ref(0)
const showBookVersionPopup = ref(false)
const currentChangeGradeIndex = ref(null)
const tabList = ref([
	{
		name: '语文',
		value: '1'
	},
	{
		name: '数学',
		value: '2'
	},
	{
		name: '英语',
		value: '3'
	}
])

const gradeList = ref([
	{
		name: '一年级',
		value: '1',
		bookVersion: '人教版'
	},
	{
		name: '二年级',
		value: '2',
		bookVersion: '北师大版'
	},
	{
		name: '三年级',
		value: '2',
		bookVersion: ''
	}
])
const bookVersionList = ref([['人教版', '北师大版', '苏教版']])

// 切换tab
const handleChange = (index) => {
	current.value = index
	showBookVersionPopup.value = true
}

// 选择教材版本
const handleBookVersionClick = (index) => {
	currentChangeGradeIndex.value = index;
	showBookVersionPopup.value = true
}

// 确认选择教材版本
const handleBookVersionConfirm = (e) => {
	gradeList.value[currentChangeGradeIndex.value].bookVersion = e.value[0]
	showBookVersionPopup.value = false
}
</script>

<style scoped lang="scss">
.form-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #f5f5f5;
	padding: 20rpx;
	border-radius: 10rpx;
	margin: 20rpx 0;
}
</style>
